<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>试题编辑</title>
    <script src="js/vue.global.3.5.13.js"></script>
    <script src="js/axios.min.0.24.0.js"></script>
    <script src="js/index.full.js"></script>
    <script src="js/icons-vue.js"></script>
    <script src="js/zh-cn.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="app">
    <div style="height: 40px"></div>
    <el-form :rules="rules" :model="question" ref="questionForm">
        <el-form-item label="选择试卷:" prop="eid">
            <el-select v-model="question.eid" placeholder="请选择试卷">
                <el-option v-for="exam in exams" :label="exam.ename" :value="exam.eid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="选择题型:" prop="tid">
            <el-select v-model="question.tid" placeholder="请选择题型" @change="showItem">
                <el-option v-for="t in types" :label="t.typeName" :value="t.tid"></el-option>
            </el-select>
        </el-form-item>
        <!--单选题-->
        <div id="div1" :style="{display:flag1}" :disabled="flag1=='none'?true:false">
            <h2>单选题</h2>
            <div>
                <el-input v-model="question.questionStem" placeholder="请输入单选题目" style="width: 300px;margin-bottom: 10px"></el-input>
                <el-radio-group v-model="question.answer" style="display: block">
                    <div>
                        <el-input v-model="question.options[0]" placeholder="请输入答案1" style="width: 300px;margin-right:10px"></el-input>
                        <el-radio v-model="question.answer" label="A">正确</el-radio>
                    </div>
                    <div>
                        <el-input v-model="question.options[1]" placeholder="请输入答案2" style="width: 300px;margin-right:10px"></el-input>
                        <el-radio v-model="question.answer" label="B">正确</el-radio>
                    </div>
                    <div>
                        <el-input v-model="question.options[2]" placeholder="请输入答案3" style="width: 300px;margin-right:10px"></el-input>
                        <el-radio v-model="question.answer" label="C">正确</el-radio>
                    </div>
                    <div>
                        <el-input v-model="question.options[3]" placeholder="请输入答案4" style="width: 300px;margin-right:10px"></el-input>
                        <el-radio v-model="question.answer" label="D">正确</el-radio>
                    </div>
                </el-radio-group>
            </div>
        </div>
        <!--单选题-->
        <div id="div2" :style="{display:flag2}" :disabled="flag2=='none'?true:false">
            <h2>多选题</h2>
            <div>
                <el-input v-model="question.questionStem" placeholder="请输入多选题目" style="width: 300px;margin-bottom: 10px"></el-input>
                <el-checkbox-group v-model="question.answer" style="display: block">
                    <div>
                        <el-input v-model="question.options[0]" placeholder="请输入答案1" style="width: 300px;margin-right:10px"></el-input>
                        <el-checkbox v-model="question.answer" label="A">正确</el-checkbox>
                    </div>
                    <div>
                        <el-input v-model="question.options[1]" placeholder="请输入答案2" style="width: 300px;margin-right:10px"></el-input>
                        <el-checkbox v-model="question.answer" label="B">正确</el-checkbox>
                    </div>
                    <div>
                        <el-input v-model="question.options[2]" placeholder="请输入答案3" style="width: 300px;margin-right:10px"></el-input>
                        <el-checkbox v-model="question.answer" label="C">正确</el-checkbox>
                    </div>
                    <div>
                        <el-input v-model="question.options[3]" placeholder="请输入答案4" style="width: 300px;margin-right:10px"></el-input>
                        <el-checkbox v-model="question.answer" label="D">正确</el-checkbox>
                    </div>
                </el-checkbox-group>
            </div>
        </div>
        <!--判断题-->
        <div id="div3" :style="{display:flag3}" :disabled="flag3=='none'?true:false">
            <h2>判断题</h2>
            <div>
                <el-input v-model="question.questionStem" placeholder="请输入判断题目" style="width: 300px;margin-bottom: 10px"></el-input>
                <el-radio-group v-model="question.answer" style="display: block">
                    <div>
                        <el-radio v-model="question.answer" label="1">正确</el-radio>
                    </div>
                    <div>
                        <el-radio v-model="question.answer" label="0">错误</el-radio>
                    </div>
                </el-radio-group>
            </div>
        </div>
        <!--操作按钮-->
        <div style="margin-top: 20px">
            <el-form-item label="">
                <el-button type="primary" @click="edit()">修改</el-button>
                <el-button type="info" @click="reset()">重置</el-button>
            </el-form-item>
        </div>
    </el-form>
</div>
<script>
    var option={
        data(){
            return {
                flag1:'none',//单选
                flag2:'none',//多选
                flag3:'none',//判断
                exams:[],
                types:[],
                question:{
                    qid:undefined,
                    tid:undefined,
                    eid:undefined,
                    questionStem:undefined,
                    options:[],
                    answer:undefined
                },
                rules:{
                    eid:[
                        {required:true,message:'请选择试卷',trigger:'blur'}
                    ],
                    tid:[
                        {required:true,message:'请选择题型',trigger:'blur'}
                    ]
                }
            }
        },
        methods:{
            showItem(){
                if(this.question.tid==1){
                    this.flag1='block';
                    this.flag2='none';
                    this.flag3='none';
                }else if(this.question.tid==2){
                    this.flag1='none';
                    this.flag2='block';
                    this.flag3='none';
                }else{
                    this.flag1='none';
                    this.flag2='none';
                    this.flag3='block';
                }
                //清空数据
                this.question.answer=undefined;
            },
            edit(){
                let _this=this;
                this.$refs.questionForm.validate(value=>{
                    if(value){
                        axios.post("question/edit",_this.question).then(resp=>{
                            if(resp.data.code==200){
                                alert(resp.data.msg);
                            }else{
                                alert(resp.data.msg);
                            }
                        });
                    }
                });
            },
            reset(){
                this.question.tid=undefined;
                this.question.eid=undefined;
                this.flag1='none';
                this.flag2='none';
                this.flag3='none';
            }
        },
        created(){
            axios.get("exam/all").then(resp=>{
                this.exams=resp.data;
            });
            axios.get("type/all").then(resp=>{
                this.types=resp.data;
            });
            //回显数据
            let q=JSON.parse(sessionStorage.getItem("question"));
            this.question.options=q.options.split(",");
            if(q.answer.length==1){
                //单选或判断
                this.question.answer=q.answer;
            }else{
                //多选
                this.question.answer=q.answer.split(",");
            }
            this.question.qid=q.qid;
            this.question.questionStem=q.questionStem;
            this.question.tid=q.tid;
            this.question.eid=q.eid;
            //控制单选、多选和判断的选项显示
            if(q.tid==1){
                //单选
                this.flag1="block";
                this.flag2="none";
                this.flag3="none";
            }else if(q.tid==2){
                //多选
                this.flag1="none";
                this.flag2="block";
                this.flag3="none";
            }else{
                //判断
                this.flag1="none";
                this.flag2="none";
                this.flag3="block";
            }
        }
    }
    var app=Vue.createApp(option);
    for(const[key,component] of Object.entries(ElementPlusIconsVue)){
        app.component(key,component);
    }
    app.use(ElementPlus,{locale:ElementPlusLocaleZhCn});
    app.mount("#app");
</script>
</body>
</html>